iT邦幫忙

2021 iThome 鐵人賽

DAY 21
1
Modern Web

製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ~系列 第 21

#21 No-code 之旅 — 如何讓網站在分享時看起來漂亮和有吸引力?Open Graph (OG) 簡介

  • 分享至 

  • xImage
  •  

大家有沒有發現當有人在社群軟體分享網址的時候,通常除了網址本身還會看到一張縮圖加上網站的標題和描述?這就是用 Open Graph (OG) 設定出來的!今天會解釋一點點什麼是 OG tag (標籤),加上怎麼在 Next.js 專案中設定 OG 標籤~

OG

Open Graph (OG) 簡介

OG 的全名是 Open Graph Protocol,中文為 “開放社交關係圖”。OG 的目標是讓網頁在社交關係圖可以豐富的呈現出來。這協定讓我們分享任何網頁在社群軟體或其他地方時,不只用網址呈現,而用比較漂亮吸引人的方式呈現,例如縮圖、標題、描述等。這些資訊都跟 OG 有關,在做網站專案時我們要特別去做設定喔~
沒有設定其實也完全不影響功能,只是分享網頁的時候可能顯示的資訊並不是你想要的或是除了網址以外什麼都沒有。

基本的 OG 標籤

OG 標籤都會放在 <head> 裡,用 <meta> 標籤去設定:

  • og:title - 網頁標題
  • og:type - 內容的媒體類型,預設為 website
  • og:image - 分享網頁時會顯示的縮圖
  • og:url - 網頁的標準網址,也就是這網頁在社交關係圖中的 ID

來寫個例子,如果用這篇文章當範例:

<!-- property 是標籤名稱,content 是標籤的值 -->
<meta property="og:url" content="https://ithelp.ithome.com.tw/articles/10278469" />
<meta property="og:type" content="article" />
<meta property="og:title" content="#21 No-code 之旅 — 如何讓網站在分享時看起來漂亮和有吸引力?Open Graph (OG) 簡介" />
<meta property="og:description" content="大家有沒有發現當有人在社群軟體分享網址的時候,通常除了網址本身還會看到一張縮圖加上網站的標題和描述?這就是用 Open Graph (OG) 設定出來的!今天會解釋一點點什麼是 OG tag (標籤),加上怎麼在 Next.js 專案中設定 OG 標籤~" />
<meta property="og:image" content="https://i.imgur.com/D9cZHL7.png" />

有沒有發現上面的例子有出現新的標籤,就是 og:description 為網頁的描述或是簡短說明

社群軟體的特別標籤

除了一般的用 og 開頭的 OG 標籤之外,你可能會看到 fbtwitter 開頭的標籤,用途就是該社群軟體可以拿到更詳細的資訊而比較豐富的呈現方式喔~

Facebook 標籤

其實 Facebook 只有一個比較特別的標籤,也就是 fb:app_id。如果你有 Facebook 到粉專或 Facebook Page,可以用你的 App ID 來分析有幾個觀看者來自你的 Facebook 粉專。

Twitter 標籤

Twitter 提供比較多的 OG 標籤,雖然他們也可以用一般 OG 標籤的資訊去顯示內容,可是 Twitter 支援比較多客製化的內容~

  • twitter:card,必須要有的標籤,內容有四種選擇 summarysummary_large_imageappplayer
  • twitter:site,網頁歸屬 (@username),例如 nytimes.com 會設定 @nytimes
  • twitter:creator,網頁內容的創作者歸屬 (@username)

iT 邦幫忙 為例子:

<meta name="twitter:card" content="summary_large_image">
<meta property="og:url" content="https://ithelp.ithome.com.tw/">
<meta property="og:type" content="website">
<meta property="og:title" content="iT 邦幫忙::一起幫忙解決難題,拯救 IT 人的一天">
<meta property="og:description" content="iT 邦幫忙是 IT 領域的技術問答與分享社群,透過 IT 人互相幫忙,一起解決每天面臨的靠北時刻。一起來當 IT 人的超級英雄吧,拯救下一個卡關的 IT 人">
<meta property="og:image" content="https://ithelp.ithome.com.tw/storage/image/fbpic.jpg">

在 Next.js 專案中加 OG 標籤

因為 OG 標籤需要加在 <head> 裡,所以我們可以用 Next.js 的 next/head 提供的 Head 元件來加我們所需要的 OG tags ~

import Head from 'next/head'

function IndexPage() {
  return (
    <div>
      <Head>
        <title>2021 iTHome Day 07</title>
        <meta name="description" content="2021 iTHome Day 07 by Jade" />
        // OG TAGS~~~
        <meta property="og:title" content="2021 iTHome Day 07" />
        <meta property="og:description" content="2021 iTHome Day 07 by Jade" />
        ...
      </Head>
      <p>Hello world!</p>
      ...
    </div>
  )
}

export default IndexPage

如果有些標籤會重複出現在不同的頁面呢?我們也可以放在 pages/_app.js 裡!而且 Next.js 保證不會重複 render 一樣的標籤,前提是我們要給每個標籤一個 key

<!-- pages/_app.js 裡 -->
<Head>
  <title>2021 iTHome Day 07</title>
  <meta property="og:title" content="2021 iTHome Day 07" key="title" />
</Head>

<!-- pages/rss.js 裡 -->
<Head>
  <meta property="og:title" content="RSS | 2021 iTHome Day 07" key="title" />
</Head>

上面出現了兩個 og:title 的標籤,可是因為給了 key="title" 讓 Next.js 知道這個指同一個標籤,Next.js 只會 render 最後一個標籤喔!

還有一件事,OG 標籤需要寫在伺服器回傳的 HTML 檔案裡面。如果是動態資料,然後伺服器回傳的 HTML 檔案裡沒有包含這些,而是等到瀏覽器去抓取動態資料再把 <head> 補齊,這麼做是沒有辦法正常顯示 OG 內容~

測試

最後,想要測試或是預覽我們的 OG 標籤有沒有正常運作可以看看下面這些工具:

小結

今天會講到 Open Graph 的原因是因為如果之後要做個人網頁,一定會需要設定 OG 標籤,不然在分享的時候,看不到網頁的任何資訊感覺很可惜。尤其是如果有做部落格,通常每篇文章會有不同的縮圖、標題、描述,這些都需要特別去設喔,像這樣~

RSS

大家想要看看之前的網站可以看這裡,或是直接到首頁~ 有任何問題可以問我,或是也可以討論未來要開發的 No-code 專案喔。

祝大家明天上班上課愉快!

晚安 <3

看更多


上一篇
#20 No-code 之旅 — Analytics ft. Google Analytics & Splitbee
下一篇
#22 No-code 之旅 — 靜態網站可以部署到哪裡?~
系列文
製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ~30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言